import { FaFileInvoice, FaHandshake, FaChalkboardTeacher, FaReceipt, 
         FaCalculator, FaFileAlt, FaPrint, FaBalanceScale, 
         FaBuilding, FaUserTie, FaHeadset, FaClipboardCheck } from 'react-icons/fa';

export default function AccountingServices() {
  const services = [
    {
      icon: FaFileInvoice,
      title: '财务代理税务报到',
      description: '取得执照一月内必须到税务所报到，否则会产生罚款。'
    },
    {
      icon: FaHandshake,
      title: '财务代理银行三方协议',
      description: '您的公司、银行、税务三方需要签订税款划转协议，以备纳税。'
    },
    {
      icon: FaChalkboardTeacher,
      title: '财务代理税务辅导',
      description: '我们会为您讲解公司纳税必备的税务知识，让您对公司缴税计算了如指掌。'
    },
    {
      icon: FaReceipt,
      title: '财务代理上门取票',
      description: '您每月需要把公司经营所产生的票据整理好，我们会上门取票。'
    },
    {
      icon: FaCalculator,
      title: '财务代理账务处理',
      description: '专业会计根据您提供的发票，依据会计准则进行账务处理。'
    },
    {
      icon: FaFileAlt,
      title: '财务代理纳税申报',
      description: '我们会根据税法计算你公司需要缴纳的税款，并进行申报。'
    },
    {
      icon: FaPrint,
      title: '财务代理打印装订凭证报表',
      description: '按照会计工作要求打印财务报表，装订记账凭证。'
    },
    {
      icon: FaBalanceScale,
      title: '财务代理所得税汇算清缴',
      description: '每年初会对您公司上年的所得税进行汇算清缴。'
    },
    {
      icon: FaBuilding,
      title: '财务代理营业执照年报',
      description: '公司营业执照每年都要申报年报，我们会为代账客户免费办理执照年报。'
    },
    {
      icon: FaUserTie,
      title: '财务代理一般纳税人认定',
      description: '如果客户需要认定一般纳税人，我们会为客户免费办理。'
    },
    {
      icon: FaHeadset,
      title: '财务代理日常税务咨询',
      description: '为客户提供权威专业的日常税务咨询。'
    },
    {
      icon: FaClipboardCheck,
      title: '财务代理服务回访',
      description: '总部会对客户进行服务回访，了解服务质量，不断提高服务质量。'
    }
  ];

  return (
    <div className="bg-white py-24 sm:py-32">
      <div className="mx-auto max-w-7xl px-6 lg:px-8">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">代理记账服务内容</h2>
          <p className="mt-6 text-lg leading-8 text-gray-600">
            专业的财务代理服务，让您安心经营企业
          </p>
        </div>
        <div className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-12 lg:mt-20 lg:max-w-none lg:grid-cols-3">
          {services.map((service, index) => (
            <div
              key={index}
              className="flex flex-col items-start p-6 bg-gray-50 rounded-xl hover:bg-gray-100 transition-colors duration-300"
            >
              <div className="mb-4 rounded-lg bg-orange-500 p-3 text-white">
                <service.icon className="h-6 w-6" />
              </div>
              <h3 className="text-lg font-semibold leading-8 tracking-tight text-gray-900 mb-2">
                {service.title}
              </h3>
              <p className="text-base leading-7 text-gray-600">{service.description}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
} 